<template>
  <div class="app-container">

    <u-page title="审核管理">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="会员卡号" prop="card_no">
            <el-input v-model="listQuery.cardNo" placeholder="请输入会员卡号" clearable show-word-limit />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="listQuery.status" placeholder="请选择状态" class="disabled" clearable>
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button v-if="row.status == 0" type="text" @click="handleEdit(row)">审核</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog :title="textMap[dialogStatus]" :show.sync="dialogFormVisible" @confirm="dialogStatus==='create'?hdlCreate():handleUpdate()">
      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="会员" prop="cardNo">
              <el-input v-model="dataForm.cardNo" placeholder="" disabled clearable maxlength="20" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="图片">
          <el-image style="max-width: 200px; max-height: 200px" :src="dataForm.picurl" lazy />
        </el-form-item>
        <el-form-item prop="status" label="操作">
          <el-radio-group v-model="dataForm.status">
            <el-radio :label="3">通过</el-radio>
            <el-radio :label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dataForm.status === 3" label="选择藏品" prop="goodsId">
          <goods :id="dataForm.id" v-model="dataForm.goods" width="160px" @change="changeGoods" />
        </el-form-item>
        <el-form-item v-if="dataForm.status === 2" label="备注" prop="note">
          <el-input v-model="dataForm.note" type="textarea" :rows="4" placeholder="请输入原因" maxlength="50" show-word-limit />
        </el-form-item>
      </el-form>
    </u-dialog>

  </div>
</template>
<script>

import goods from '../components/goods'
export default {
  components: {
    goods
  },
  data() {
    return {
      api: this.$u.api.PluginsNftSendlog,
      // 表格
      columns: [
        {
          prop: 'cardNo',
          label: '会员',
          width: '120'
        },
        {
          prop: 'picurl',
          label: '图片',
          image: true
        },
        {
          prop: 'createdAt',
          label: '上传时间',
          timestamp: true,
          width: '140',
          sortable: true
        },
        {
          prop: 'goods',
          label: '发放藏品',
          width: '80',
          formatter: (row, column) => {
            const { goods } = row
            if (goods) {
              return goods.title
            }
          }
        },
        {
          prop: 'note',
          label: '备注',
          width: '140'
        },
        {
          prop: 'updatedAt',
          label: '审核时间',
          width: '140',
          formatter: (row, column) => {
            const { updatedAt } = row
            if (updatedAt) {
              return this.$u.timeFormat(updatedAt)
            }
          },
          sortable: true
        },
        {
          prop: 'updatedBy',
          label: '审核人',
          width: '140'
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            if (params.row.status === 0) {
              return h('el-tag', { props: { type: 'danger' }}, '未审核')
            } else if (params.row.status === 3) {
              return h('el-tag', { props: { type: 'success' }}, '审核通过')
            } else {
              return h('el-tag', { props: { type: 'warning' }}, '审核不通过')
            }
          }
        }
      ],
      statusList: [
        {
          value: '',
          label: '全部'
        }, {
          value: '0',
          label: '未审核'
        }, {
          value: '3',
          label: '审核通过'
        }, {
          value: '2',
          label: '审核不通过'
        }
      ],
      list: [],
      listLoading: true,
      listOptions: {
        mutiSelect: true, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        status: '0'
      },

      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑审核',
        create: '新增审核'
      },
      dataForm: {
        goods: {},
        goodsId: '',
        gainId: ''
      },
      rules: {
        status: [
          { required: true, message: '请选择', trigger: ['change'] }
        ],
        goodsId: [
          { required: true, message: '请选择', trigger: ['change'] }
        ],
        note: [
          { required: true, message: '请填写', trigger: ['blur'] }
        ]
      },
      // 删除选中数据
      selectData: [],
      newForm: {
        type: 1,
        status: 3
      }
    }
  },
  created() {
    this.hdlList()
  },
  methods: {
    changeDate(item) {
      if (item) {
        this.dataForm.beginDate = item[0]
        this.dataForm.endDate = item[1]
      } else {
        this.dataForm.beginDate = ''
        this.dataForm.endDate = ''
      }
    },
    // 打开修改弹窗
    handleEdit(row) {
      this.hdlEdit(row)
    },
    changeGoods(item) {
      this.dataForm.goodsId = item.id
      this.dataForm.gainId = item.gainId
    },
    // 修改
    handleUpdate() {
      if (this.dataForm.status === 3) {
        this.dataForm.note = ''
      } else {
        delete this.dataForm.goods
        this.dataForm.goodsId = ''
        this.dataForm.gainId = ''
      }
      if (this.dataForm.status === 3 && this.dataForm.goodsId === ''){
        alert('请选择藏品')
      }else {
        this.hdlUpdate()
      }
    }
  }
}
</script>
